<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人主页</title>
    <style type="text/css">
        body{
            margin: 0;
        }

        header{
            height: 60px;
            background-color: red;
        }

        #hd{
            width:100%;
        }

        #sd{
            width: 100%;
        }

        .nav{
            height: 60px;
            width: 100%;
            background-color: white;
            position: fixed;

            /*添加阴影效果*/
            box-shadow: 0  -1px 2px grey inset;

            /*内边距,用法和margin一样,可以两个值(上下,左右),或四个值(上,下,左,右)*/
            padding: 0 30px;

            /*position: relative;*/
        }



        #logo{
            width: 150px;
            height: 60px;
            background-image: url(logo.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

            display: inline-block;
        }

        #selections{
            height: 60px;
            display: inline-block;
            line-height: 60px;

            /*设置纵向的对齐方式*/
            vertical-align: top; 
            position: absolute;
            right: 90px;
        }

        #selections a{
            text-decoration: none;
            color: #223344;
        }

        /*:hover 给元素添加鼠标悬停的效果.*/
        #selections a:hover{
            color: red;
            font-size: 18px;
        }

        main{
            padding: 30px;

        }

        p{
            line-height: 2rem;
            text-indent: 2em;
        }

        /*:before代表往元素前边插入内容.
        :after;代表往元素后边插入一些内容.
        before和after必须有一个content的属性来设置内容,before和after插入的内容只是起到修饰的作用,不会被复制.
        */
        p:before{
            content:'“';
            font-size: 32px;
            font-family: '宋体';
            font-weight: 400;
            color: grey;
        }

        p:after{
            content:'”';
            font-size: 32px;
            font-family: '宋体';
            font-weight: 400;
            color: grey;
        }

        h2:before{
            content: '\258A';
        }

        #classmates{
            position: relative;
        }

        #classmates img{
            border-radius: 50%;
            border:5px solid white;
            position: absolute;
        }

        #classmates img:nth-child(1){
            width: 100%;
            border-radius: 0;
            position: relative;
        }

        #classmates img:nth-child(2){
            width: 10%;
            left: 40%;
            top:20%;
        }

        #classmates img:nth-child(3){
            width: 20%;
            left: 10%;
            top:50%;
        }

        #classmates img:nth-child(4){
            width: 30%;
            left: 60%;
            top:30%;
        }

        .hr{
            height: 2px;
            border-bottom: 1px solid gray;
        }

    </style>
</head>
<body>
    <header>
        <div class="nav">
            <div id="logo"></div>
            <!-- &#x3000;&#x3000;&#x3000;&#x3000; -->
            <div id="selections">
                <span><a href="#">首页</a></span>
                &#x3000;&#x3000;
                <span><a href="#">HTML5</a></span>
                &#x3000;&#x3000;
                <span><a href="#">我的同学</a></span>
                &#x3000;&#x3000;
                <span><a href="#">我的家乡</a></span>
                &#x3000;&#x3000;
                <span><a href="#">我的学校</a></span>
                &#x3000;&#x3000;
                <span><a href="#">关于我</a></span>
            </div>
        </div>       
    </header>
    <img id="hd" src="header.jpg" alt="一张漂亮的风景图" title="一张漂亮的风景图">
    <main>
        <p>学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。 如果能够在使用它的过程中体会到乐趣，就是学习的最佳状态。希望大家在学习HTML5的过程中多多练习，多敲代码一定会有回报，意想不到的收获都会在使用的过程中迸发出来。</p>

        <h2>HTML5</h2>
        <img id="sd" src="html5.jpg" alt="一张HTML5的图片" title="一张HTML5的图片">
        <h2>我的同学</h2>

              
        <div id="classmates">
            <img src="classmates.jpg">  
            <img src="wf.png">
            <img src="ldh.jpg">
            <img src="lry.jpg">
        </div>
        <div class="hr"></div>
    </main>

    <!-- hr快速生成一个分割线,但是样式比较丑,很少有人使用.
    大多数情况下,都会使用底部边框的形式来代替. 
    -->
    <!-- <hr> -->

    <p>&copy;2017智游教育 版权所有</p>
</body>
</html>